<script setup lang="ts">
// import { ref } from 'vue'
import { userApi } from "@/api";
// 响应式数据
const tableData = ref<OfficeLocation[]>([]);
const Data = ref<OfficeLocation[]>([]);
// 定义数据类型
interface OfficeLocation {
  location: string;
  latitude: string;
  longitude: string;
  radius: string;
}
const login = async () => {
  try {
    const res = await userApi.login({
      // 参数是动态的，页面是联动的
      appId: "43",
      token: "3b2c135b-c69d-40b0-800a-43732c24bbae",
    });
    tableData.value = toRaw(res.data).data
    return tableData;
  } catch (error) {
    //
    // console.error(error);
  }
};
// 组建挂载时获取数据
// onMounted(() => {
//   login()
// })
</script>

<template>
  <div>
    <el-button type="primary" @click="login"> 测试按钮 </el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="latitude" label="位置" width="180" />
      <el-table-column prop="location" label="经度" width="180" />
      <el-table-column prop="longitude" label="维度" />
      <el-table-column prop="radius" label="编号" />
    </el-table>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
